<template>
  <div class="project zy-content ">
    <div class="title">
      <span>人员上下级管理</span>
      <div class="icon">
        <span class="creatBtnright" @click="createfaultCodeShowH">
          <span><Icon type="ios-add-circle" color="#187BDB" /></span>
          <span class="rightbtn">单个创建</span>
        </span>
        <span class="creatBtnright" @click="createfaultCodeShowH">
          <span><Icon type="ios-download-outline" color="#187BDB" /></span>
          <span class="rightbtn">{{$t('common.Import')}}</span>
        </span>
        <span class="creatBtnright" @click="createfaultCodeShowH">
          <span><Icon type="ios-download-outline" color="#187BDB" /></span>
          <span class="rightbtn">导出模板</span>
        </span>
      </div>
    </div>
    <Form :label-width="70" class="search-form">
        <Row>
          <Col :span="span">
            <FormItem label="人员姓名">
              <Input type="text" v-model="formInline.text" :placeholder="`${$t('common.inputInfo')}`" class="inputBorder" :maxlength="32"></Input>
            </FormItem>
          </Col>
          <Col :span="span">
            <FormItem label="人员工号">
              <Input type="text" v-model="formInline.text" :placeholder="`${$t('common.inputInfo')}`" class="inputBorder" :maxlength="32"></Input>
            </FormItem>
          </Col>
          <Col :span="span">
            <FormItem label="层次：">
              <Radio-group v-model="phone">
        <Radio label="本人">
            <span>本人</span>
        </Radio>
        <Radio label="上级">
            <span>上级</span>
        </Radio>
        </Radio-group>
            </FormItem>
          </Col>
          <Col :span="8" align="center">
            <Button type="primary">{{$t('common.Query')}}</Button>
          </Col>
        </Row>
      </Form>
      <Table class="recycleBinTable" ellipsis ref="selection" :columns="columns" :data="data"  @on-selection-change="onSelectChange">
        <template slot-scope="{ row }" slot="action">
            <!-- <span class="operationBtn" @click="deleteRow(row)"><Icon type="ios-trash-outline" />{{$t('common.Delete')}}</span> -->
            <!-- <span class="operationBtn" @click="reset(row)"><Icon type="ios-compose-outline" />{{$t('common.Edit')}}</span> -->
        </template>
      </Table>
      <div class="pageWrap">
            <Page :total="total" :page-size="pageSize" :page-size-opts="pageSizeOption" :current="pageNum" @on-change="changePageNum" @on-page-size-change="changePageSize" show-sizer show-total />
        </div>
      <Modal :mask-closable="false"
            v-model="create"
            title="添加处理方式"
            :loading="loading">
            <Form class="formList" :model="formItem" :label-width="100" >
                <FormItem label="故障性质：" required >
                    <Input type="text" v-model="formItem.materialCode" :placeholder="`${$t('common.inputInfo')}`" class="inputBorder" :maxlength="32"></Input>
                </FormItem>
                <FormItem label="处理方式：" required >
                    <Input type="text" v-model="formItem.materialCode" :placeholder="`${$t('common.inputInfo')}`" class="inputBorder" :maxlength="32"></Input>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="default"  @click="create = false">{{$t('common.Cancle')}}</Button>
                <Button type="primary" :loading="loading"  @click="addOk">{{$t('maintenance.Confirmed')}}</Button>
            </div>
        </Modal>
  </div>
</template>

<script>
export default {
  name: "recycleBin",
  components: {},
  mounted() {
    // for (let i = 0; i < 2; i++) {
    //   this.data.push(
    //     {
    //       nature: '操作故障', 
    //       describe: '',
    //     }
    //   )
    // }
  },
  data() {
    return {
      phone: '本人',
      addtitle:"",
      loading:false,
      create:false,
      formItem:{},
      pageNum:1,
      pageSize:10,
      total:0,
      pageSizeOption: [10,20,30,40],
      span: 4,
       columns: [
        {type: 'selection', width: 60, align: 'center'},
        {title: '所属区域', key: 'nature'},
        {title: '人员工号', key: 'describe'},
        {title: '人员姓名', key: 'describe'},
        {title: '一级上级人员', key: 'describe'},
        {title: '二级上级人员', key: 'describe'},
        {title: '三级上级人员', key: 'describe'},
        {title: `${ this.$t('common.operation') }`, slot: "action", width: 200, align: 'center'},
      ],
      data: [],
      formInline: {

      }
    }
  },
  methods: {
    reset() {

    },
    changePageSize(pageSize) {
      this.pageSize = pageSize;
    },
    changePageNum(val){
      this.pageNum = val;
    },
    deleteRow(row) {
      console.log(row)
    },
    onSelectChange(selection) {
      console.log(selection)
    },
    createfaultCodeShowH() {
      this.create = true
    },
    addOk(){
      console.log(1)
    }
  }
}
</script>

<style scoped lang="scss">
  .project{
    //background: #ffffff;
    height: calc(100vh - 150px);
    .title{
      display: flex;
      justify-content: space-between;
      font-size: 20px;
      padding: 10px;
      border-bottom: 1px solid #dddddd;
      .icon {
        display: flex;
         .creatBtnright {
          display: flex;
          align-items: center;
          font-size: 16px; 
          i {
            font-size: 36px;
          }
        }
      }
    }
  }
    
</style>
